﻿<template>
  <div>
    <!-- 加了时段排序横排 -->
    <fieldset class="scheduler-border">
      <legend class="scheduler-border" style=" margin-bottom:5px;text-align: center;">新建节目信息</legend>
      <div>
        <div style="color: red;font-size: 16px;text-align: center;" id="error"></div>

        <div class="col-md-12" style="padding-right:0px;padding-left:0px;">
          <div class="col-md-3" style="padding-right:0px;padding-left:0px;">
            <ul
              class="nav nav-pills"
              id="materialinfo"
              style="background-color: #F7F7F7;top:50px;padding-left: 15px;margin-left: 0px;"
            >
              <!-- <li role="presentation" class=""><a href="javacript:void(0);" ><img src="static/img/字体.png" style="width:36px" class="img-rounded"><br/><b>&nbsp;字幕</b></a></li>!-->
              <li role="presentation">
                <a>
                  <img src="static/img/wb.png" style="width:36px" class="img-rounded" />
                  <br />
                  <b>&nbsp;文本</b>
                </a>
              </li>
              <li role="presentation">
                <a>
                  <img src="static/img/tp.png" style="width:36px" class="img-rounded" />
                  <br />
                  <b>&nbsp;图片</b>
                </a>
              </li>
              <li role="presentation" title="一个节目只能有一个分区上传一个gif,否则容易出现问题">
                <a>
                  <img src="static/img/sp.png" style="width:36px" class="img-rounded" />
                  <br />
                  <b>&nbsp;动画</b>
                </a>
              </li>
            </ul>
            <ul
              class="nav nav-pills nav-stacked"
              id="material"
              style="background-color:#ffffff;height:300px;overflow:auto;margin-left: 0px;"
            >
              <div class="panel panel-primary" style="margin-bottom: 0px">
                <div class="panel-heading">
                  <h3 class="panel-title">
                    <img src="static/img/shou.png" class="img-rounded" style="width: 30px;" />节目信息
                  </h3>
                </div>
              </div>
            </ul>
          </div>
          <div
            class="col-md-9"
            style="border:1px solid #428bca;border-bottom:none;border-right:none;border-right:none;padding-left:0px;padding-right:0px;"
          >
            <div id="splitscreen" style="height:190px;background:#CDD3CA;overflow:auto;">
              <div
                tabindex="0"
                onblur="onblurdiv()"
                style="width:516px;height:190px;background-color: #413d3d;position:relative;margin: auto;overflow:hidden;z-index: 100;"
                id="program"
              ></div>
            </div>
            <canvas id="screen_size" style="position: absolute;z-index:0;"></canvas>
            <fieldset
              class="scheduler-border"
              style="border:none;border-top: 1px solid rgb(66, 139, 202);display: none;"
            >
              <legend class="scheduler-border" style=" margin-bottom: 0px">分区信息</legend>
              <form class="form-inline" role="form" style="display: none;">
                <input type="hidden" id="lineheight" value="1.2" />
                <input type="hidden" id="index" />
                <input type="hidden" id="FTPurl" />
                <input type="hidden" id="size" />
                <input type="hidden" id="txtpath" />
                <input type="hidden" id="materialid" />
                <input type="hidden" id="txt" />
                <div class="form-group col-sm-3" style>
                  <label for="name" class="control-label">
                    <p>
                      分区类型&nbsp;
                      &emsp;&ensp;&emsp; &thinsp; &zwnj;&zwj;
                    </p>
                  </label>
                  <select id="type" style="width:196px" class="form-control">
                    <option value="0">文字分区</option>
                    <option value="1">图片分区</option>
                    <option value="2">动画分区</option>
                  </select>
                </div>

                <!-- <div class="form-group col-sm-3">
<label for="name" class="control-label"><p>文本&ensp;&emsp;&thinsp;&zwnj;
&zwj;</p>
    </label>
<select title="" style="width:196px"  id="texttype" class="form-control">
  <option value="1" >电脑字体</option>
   <option value="0" >文字</option></select>
                </div>-->

                <div class="form-group col-sm-3" style="display: none">
                  <label for="name" class="control-label">
                    <p>
                      文本对齐&ensp;
                      &emsp;
                      &thinsp;
                      &zwnj;
                      &zwj;
                    </p>
                  </label>
                  <select title style="width:196px" id="alignment" class="form-control">
                    <!-- <option value="0" >左对齐</option>
   <option value="1" >右对齐</option>
   <option value="2" >居中对齐</option>
                    <option value="3" >上下对齐</option>!-->
                    <option value="0">居上</option>
                    <option value="1">垂直居中</option>
                    <option value="2">居下</option>
                  </select>
                </div>
                <!--display: flex;
                align-items: center;-->

                <div class="form-group col-sm-3">
                  <label for="name" class="control-label">左边起始位置&ensp; &emsp; &thinsp; &zwnj;&zwj;</label>
                  <!--<input type="number" class="form-control" id="left" value="0"  placeholder="请输入左边起始位置"  min="0" max="1000" step="8" style="width:196px"/>-->

                  <div class="input-group spinner">
                    <input
                      type="text"
                      class="form-control"
                      onkeyup="this.value=this.value.replace(/\D/g,'')"
                      onafterpaste="this.value=this.value.replace(/\D/g,'')"
                      id="left"
                      placeholder="请输入左边起始位置"
                      value="0"
                    />
                    <div class="input-group-btn-vertical">
                      <button class="btn btn-default" type="button">
                        <i class="fa fa-caret-up"></i>
                      </button>
                      <button class="btn btn-default" type="button">
                        <i class="fa fa-caret-down"></i>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="form-group col-sm-3">
                  <label for="name" class="control-label">顶端起始位置&ensp; &emsp; &thinsp; &zwnj;&zwj;</label>
                  <!-- <input type="number" class="form-control" id="top" value="0"  placeholder="请输入顶端起始位置" min="0" max="1000" step="0" style="width:196px"/>!-->

                  <div class="input-group spinner">
                    <input
                      type="text"
                      class="form-control"
                      onkeyup="this.value=this.value.replace(/\D/g,'')"
                      onafterpaste="this.value=this.value.replace(/\D/g,'')"
                      id="top"
                      placeholder="请输入顶端起始位置"
                      value="0"
                    />
                    <div class="input-group-btn-vertical">
                      <button class="btn btn-default" type="button">
                        <i class="fa fa-caret-up"></i>
                      </button>
                      <button class="btn btn-default" type="button">
                        <i class="fa fa-caret-down"></i>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="form-group col-sm-3">
                  <label for="name" class="control-label">
                    <p>
                      宽度
                      &ensp;
                      &emsp;
                      &thinsp;
                      &zwnj;&ensp; &emsp; &thinsp; &zwnj;&zwj;
                      &zwj;
                    </p>
                  </label>
                  <!--	<input type="number" class="form-control" value="516" step="8" id="width"   style="width:196px"
                  placeholder="请输入宽度">!-->
                  <div class="input-group spinner">
                    <input
                      type="text"
                      onkeyup="this.value=this.value.replace(/\D/g,'')"
                      onafterpaste="this.value=this.value.replace(/\D/g,'')"
                      class="form-control"
                      id="width"
                      placeholder="请输入宽度"
                      value="516"
                    />
                    <div class="input-group-btn-vertical">
                      <button class="btn btn-default" type="button">
                        <i class="fa fa-caret-up"></i>
                      </button>
                      <button class="btn btn-default" type="button">
                        <i class="fa fa-caret-down"></i>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="form-group col-sm-3">
                  <label for="name" class="control-label">
                    <p>
                      高度
                      &ensp;
                      &emsp;
                      &thinsp;
                      &zwnj;
                      &zwj;&ensp; &emsp; &thinsp; &zwnj;&zwj;
                    </p>
                  </label>
                  <!--	<input type="number" class="form-control" id="high"  value="190"  style="width:196px"
                  placeholder="请输入高度">!-->
                  <div class="input-group spinner">
                    <input
                      type="text"
                      onkeyup="this.value=this.value.replace(/\D/g,'')"
                      onafterpaste="this.value=this.value.replace(/\D/g,'')"
                      class="form-control"
                      id="high"
                      placeholder="请输入高度"
                      value="190"
                    />
                    <div class="input-group-btn-vertical">
                      <button class="btn btn-default" type="button">
                        <i class="fa fa-caret-up"></i>
                      </button>
                      <button class="btn btn-default" type="button">
                        <i class="fa fa-caret-down"></i>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="form-group col-sm-3">
                  <label for="name" class="control-label">
                    进入方式&ensp;
                    &emsp;
                    &thinsp;&ensp; &emsp; &thinsp; &zwnj;&zwj;
                    &zwnj;
                  </label>
                  <!--<input type="text" class="form-control" id="intype" 
                  placeholder="请输入进入方式">!-->

                  <!--  <select class="form-control" id="intype" style="width:196px">
									<option value="0">连续左移</option>	
										<option value="1">连续右移</option>	
											<option value="2" selected>向左移入</option>	
												<option value="3">向右移入</option>
													<option value="4">向上移入</option>	
													<option value="5">向下移入</option>	
							
              
       ;
                  </select>!-->
                  <select id="intype" class="form-control" style="width:196px">
                    <!-- <option value="0">随机显示</option> -->
                    <option value="1">静止显示</option>
                    <option value="2" selected="selected">连续左移</option>
                    <option value="3">连续右移</option>
                    <option value="4">连续上移</option>
                    <option value="5">连续下移</option>
                    <option value="6">向左移入</option>
                    <option value="7">向右移入</option>
                    <option value="8">向上移入</option>
                    <option value="9">向下移入</option>
                    <option value="10">从右向左展开</option>
                    <option value="11">从左向右展开</option>
                    <option value="12">从下向上展开</option>
                    <option value="13">从上向下展开</option>
                    <!-- <option value="14">从中间向左右展开</option>	 -->
                    <!-- <option value="15">从中间向左右展开</option>	 -->
                    <option value="16">从上下向中间展开</option>
                    <option value="17">从左右向中间展开</option>
                    <!-- <option value="18">闪烁</option>	 -->
                    <!-- <option value="19">穿插</option>	 -->
                    <!-- <option value="20">从上向下飘雪</option>	
                    <option value="21">从下向上飘雪</option>-->
                    <!-- <option value="22">从下向上镭射</option>
                    <option value="23">从上向下镭射</option>-->
                    <!-- <option value="24">从右向左镭射</option> -->
                    <!-- <option value="25">从左向右镭射</option> -->
                    <!-- <option value="26">从下向上拉伸</option>
            <option value="27">从上向下拉伸</option>
            <option value="28">从右向左拉伸</option>
                    <option value="29">从左向右拉伸</option>-->
                    <!-- <option value="30">从下向上百叶窗</option>
            <option value="31">从上向下百叶窗</option>
            <option value="32">从左向右百叶窗</option>
                    <option value="33">从右向左百叶窗</option>-->
                    <!-- <option value="34">从中间向左右扇形展开</option>
                    <option value="35">从左右向中间扇形关闭</option>-->
                    <!-- <option value="36">向左旋90度</option>
                    <option value="37">向右旋90度</option>-->
                    <!-- <option value="38">向左旋180度</option>
            <option value="39">向右旋180度</option>
            <option value="40">向左旋360度</option>
                    <option value="41">向右旋360度</option>-->
                    <!-- <option value="42">从左上角覆盖</option>
            <option value="43">从右上角覆盖</option>
            <option value="44">从左下角覆盖</option>
            <option value="45">从右下角覆盖</option>
            <option value="46">十字向内</option>
                    <option value="47">十字向外</option>-->
                    <!-- <option value="48">菱形向内</option>
                    <option value="49">菱形向外</option>-->
                  </select>
                </div>
                <div class="form-group col-sm-3">
                  <label for="name" class="control-label" id="eninText">
                    进入速度&ensp;
                    &emsp;
                    &thinsp;&ensp; &emsp; &thinsp; &zwnj;&zwj;
                    &zwnj;
                  </label>
                  <!--<input type="number" class="form-control" id="inspeed" 
                  placeholder="请输入进入速度">!-->
                  <div class="input-group spinner">
                    <input
                      type="text"
                      onkeyup="inspeedOnkeup(this)"
                      class="form-control"
                      maxlength="3"
                      id="inspeed"
                      placeholder="请输入进入速度"
                      value="1"
                    />
                    <div class="input-group-btn-vertical">
                      <button class="btn btn-default" type="button">
                        <i class="fa fa-caret-up"></i>
                      </button>
                      <button class="btn btn-default" type="button">
                        <i class="fa fa-caret-down"></i>
                      </button>
                    </div>
                  </div>
                </div>

                <div class="form-group col-sm-4" style="display: none;">
                  <label for="name" class="control-label">背景颜色</label>
                  <!-- <select class="form-control" id="backcolor" style="width:196px">
											<option value="#000000">黑色</option>
													 	<option value="#FF0000">红色</option>
													<option value="#00FF00">绿色</option>
														<option value="#0000FF">蓝色</option>
														<option value="#C0C0C0">灰色</option>
                  <option value="#FFFFFF">白色</option>!-->

                  <select name="backcolor" id="backcolor" class="form-control" style="width:196px">
                    <option value="black">黑色</option>
                    <option value="red">红色</option>
                    <option value="green">绿色</option>
                    <option value="yellow">黄色</option>
                    <option value="blue">蓝色</option>
                    <option value="purple">紫色</option>
                    <option value="cyan">青色</option>
                    <option value="white">白色</option>
                  </select>
                </div>
                <div class="form-group col-sm-3">
                  <label for="name" class="control-label">
                    停留时间&ensp;
                    &emsp;
                    &thinsp;&ensp; &emsp; &thinsp; &zwnj;&zwj;
                    &zwnj;
                  </label>
                  <!--	<input type="number" class="form-control" value="0" id="staytime" placeholder="请输入停留时间" min="0" max="1000" step="0" style="width:196px"/>!-->

                  <div class="input-group spinner">
                    <input
                      type="text"
                      class="form-control"
                      onkeyup="this.value=this.value.replace(/\D/g,'')"
                      maxlength="3"
                      onafterpaste="this.value=this.value.replace(/\D/g,'')"
                      id="staytime"
                      placeholder="请输入停留时间"
                      value="1"
                    />
                    <div class="input-group-btn-vertical">
                      <button class="btn btn-default" type="button">
                        <i class="fa fa-caret-up"></i>
                      </button>
                      <button class="btn btn-default" type="button">
                        <i class="fa fa-caret-down"></i>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="form-group col-sm-3" id="fontcolordiv" style="display:">
                  <label for="name" class="control-label">
                    字体颜色
                    &ensp;
                    &emsp;
                    &thinsp;
                    &zwnj;&ensp; &emsp; &thinsp; &zwnj;&zwj;
                  </label>
                  <!--<input type="text" class="form-control" id="fontcolor" 
                  placeholder="请输入字体颜色">!-->
                  <select name="fontcolor" id="fontcolor" class="form-control" style="width:196px">
                    <option value="red">红色</option>
                    <option value="green">绿色</option>
                    <option value="yellow">黄色</option>
                    <option value="blue">蓝色</option>
                    <option value="purple">紫色</option>
                    <option value="cyan">青色</option>
                    <option value="white">白色</option>
                  </select>
                </div>
                <div class="form-group col-sm-3" id="fontsizediv" style="display: none;">
                  <label for="name" class="control-label">
                    字体大小
                    &ensp;
                    &emsp;
                    &thinsp;
                    &zwnj;&ensp; &emsp; &thinsp; &zwnj;&zwj;
                  </label>
                  <select id="fontsizeadd" style="width:196px" class="form-control">
                    <option value="4">12*12</option>
                    <option value="1" selected>16*16</option>
                    <option value="2">24*24</option>
                    <option value="3">32*32</option>
                    <!-- <option value="5">48*48</option>
                    <option value="6">64*64</option>-->
                  </select>
                </div>
                <div class="form-group col-sm-3" style="float: left;display:none">
                  <label for="name" class="control-label">
                    <p>
                      字体
                      &ensp;
                      &emsp;
                      &thinsp;
                      &zwnj;
                      &zwj;&ensp; &emsp; &thinsp; &zwnj;&zwj;
                    </p>
                  </label>
                  <select id="typefaceval" style="width:196px" class="form-control">
                    <!-- <option value="" id="-1">点阵</option> -->
                    <option value="4" id="4">炫彩</option>
                    <!-- <option value="SimSun" id="0" style="display: none;">宋体</option> -->
                    <!-- <option value="FangSong" id="1">仿体</option>
              <option value="微软雅黑" id="2">微软雅黑</option>
              <option value="LiSu" id="5">隶书</option>
                    <option value="SimHei" id="6">黑体</option>-->
                  </select>
                </div>

                <div class="form-group col-sm-3" style="display:;">
                  <label for="name" class="control-label">
                    炫彩效果
                    &ensp;
                    &emsp;
                    &thinsp;
                    &zwnj;&ensp; &emsp; &thinsp; &zwnj;&zwj;
                  </label>
                  <select id="Dazzle" style="width:196px" class="form-control">
                    <option value="0">无效果</option>
                  </select>
                </div>

                <div class="form-group col-sm-3" style="float: left;display: none;">
                  <label for="name" class="control-label">
                    <p>
                      字体特效
                      &ensp;
                      &emsp;
                      &thinsp;
                      &zwnj;
                      &zwj;
                    </p>
                  </label>
                  <select id="randomFontColor" style="width:196px" class="form-control">
                    <option value="0" id="0">无</option>
                    <option value="1" id="1">一字一色</option>
                    <option value="2" id="2">二字一色</option>
                    <option value="3" id="3">三字一色</option>
                    <option value="4" id="4">四字一色</option>
                  </select>
                </div>

                <div class="form-group col-sm-3" style="display:">
                  <label for="name" class="control-label">
                    <p>编辑方式&ensp;&emsp;&thinsp;&zwnj;&zwj;&ensp;&emsp;&thinsp;&zwnj;&zwj;</p>
                  </label>
                  <select title style="width:196px" id="texttype" class="form-control">
                    <option value="0">简单编辑</option>
                    <!-- <option value="2" >一字一色</option> -->
                    <option value="1">Word编辑</option>
                  </select>
                </div>
                <div class="form-group col-md-12">
                  <!-- <div id="container" name="container"></div> -->
                  <!--   <UEditor :config=config ref="ueditor123" ></UEditor>!-->
                  <!-- 电脑字体 -->
                  <div id="text_pic_form" class="play_item_form" style="display:none">
                    <div class="col2">
                      <input type="hidden" id="imgDataURL" />
                      <div class="rich_text">
                        <div class="form-group set">
                          <div class="btn-group w-10">
                            <button type="button" class="btn text-family"></button>
                            <button
                              type="button"
                              class="btn btn-default dropdown-toggle"
                              data-toggle="dropdown"
                              aria-expanded="false"
                            >
                              <span
                                class="caret"
                                style="margin-top: 0px;border-top-color: #131313;"
                              ></span>
                            </button>
                            <ul class="dropdown-menu drop_font2" style=" height: 160px;"></ul>
                          </div>
                          <div class="btn-group w-9 text-color">
                            <button type="button" class="btn">
                              <span class="c255"></span>红色
                            </button>
                            <button
                              type="button"
                              class="btn btn-default dropdown-toggle"
                              data-toggle="dropdown"
                              aria-expanded="false"
                            >
                              <span
                                class="caret"
                                style="margin-top: 0px;border-top-color: #131313;"
                              ></span>
                            </button>
                            <ul class="dropdown-menu drop_color2">
                              <li>
                                <a val="255">
                                  <span class="c255"></span>红色
                                </a>
                              </li>
                              <li>
                                <a val="65280">
                                  <span class="c65280"></span>绿色
                                </a>
                              </li>
                              <li>
                                <a val="65535">
                                  <span class="c65535"></span>黄色
                                </a>
                              </li>
                              <li>
                                <a val="16711680">
                                  <span class="c16711680"></span>蓝色
                                </a>
                              </li>
                              <li>
                                <a val="16711935">
                                  <span class="c16711935"></span>紫色
                                </a>
                              </li>
                              <li>
                                <a val="16776960">
                                  <span class="c16776960"></span>青色
                                </a>
                              </li>
                              <li>
                                <a val="16777215">
                                  <span class="c16777215"></span>白色
                                </a>
                              </li>
                            </ul>
                          </div>
                          <div class="btn-group w-6 text-size">
                            <button type="button" class="btn" val="16">16</button>
                            <button
                              type="button"
                              class="btn btn-default dropdown-toggle"
                              data-toggle="dropdown"
                              aria-expanded="false"
                            >
                              <span
                                class="caret"
                                style="margin-top: 0px;border-top-color: #131313;"
                              ></span>
                            </button>
                            <ul class="dropdown-menu drop_fontsize2">
                              <li>
                                <a val="12">12</a>
                              </li>
                              <li>
                                <a val="13">13</a>
                              </li>
                              <li>
                                <a val="14">14</a>
                              </li>
                              <li>
                                <a val="15">15</a>
                              </li>
                              <li>
                                <a val="16">16</a>
                              </li>
                              <li>
                                <a val="17">17</a>
                              </li>
                              <li>
                                <a val="18">18</a>
                              </li>
                              <li>
                                <a val="19">19</a>
                              </li>
                              <li>
                                <a val="20">20</a>
                              </li>
                              <li>
                                <a val="21">21</a>
                              </li>
                              <li>
                                <a val="22">22</a>
                              </li>
                              <li>
                                <a val="23">23</a>
                              </li>
                              <li>
                                <a val="24">24</a>
                              </li>
                              <li>
                                <a val="25">25</a>
                              </li>
                              <li>
                                <a val="26">26</a>
                              </li>
                              <li>
                                <a val="27">27</a>
                              </li>
                              <li>
                                <a val="28">28</a>
                              </li>
                              <li>
                                <a val="29">29</a>
                              </li>
                              <li>
                                <a val="30">30</a>
                              </li>
                              <li>
                                <a val="31">31</a>
                              </li>
                              <li>
                                <a val="32">32</a>
                              </li>
                              <li>
                                <a val="33">33</a>
                              </li>
                              <li>
                                <a val="34">34</a>
                              </li>
                              <li>
                                <a val="35">35</a>
                              </li>
                              <li>
                                <a val="36">36</a>
                              </li>
                              <li>
                                <a val="37">37</a>
                              </li>
                              <li>
                                <a val="38">38</a>
                              </li>
                              <li>
                                <a val="39">39</a>
                              </li>
                              <li>
                                <a val="40">40</a>
                              </li>
                              <li>
                                <a val="41">41</a>
                              </li>
                              <li>
                                <a val="42">42</a>
                              </li>
                              <li>
                                <a val="43">43</a>
                              </li>
                              <li>
                                <a val="44">44</a>
                              </li>
                              <li>
                                <a val="45">45</a>
                              </li>
                              <li>
                                <a val="46">46</a>
                              </li>
                              <li>
                                <a val="47">47</a>
                              </li>
                              <li>
                                <a val="48">48</a>
                              </li>
                              <li>
                                <a val="49">49</a>
                              </li>
                              <li>
                                <a val="50">50</a>
                              </li>
                              <li>
                                <a val="51">51</a>
                              </li>
                              <li>
                                <a val="52">52</a>
                              </li>
                              <li>
                                <a val="53">53</a>
                              </li>
                              <li>
                                <a val="54">54</a>
                              </li>
                              <li>
                                <a val="55">55</a>
                              </li>
                              <li>
                                <a val="56">56</a>
                              </li>
                              <li>
                                <a val="57">57</a>
                              </li>
                              <li>
                                <a val="58">58</a>
                              </li>
                              <li>
                                <a val="59">59</a>
                              </li>
                              <li>
                                <a val="60">60</a>
                              </li>
                              <li>
                                <a val="61">61</a>
                              </li>
                              <li>
                                <a val="62">62</a>
                              </li>
                              <li>
                                <a val="63">63</a>
                              </li>
                              <li>
                                <a val="63.9">64</a>
                              </li>
                            </ul>
                          </div>
                        </div>
                        <div class="input-text">
                          <div
                            id="editor"
                            contenteditable="true"
                            style="height:115px"
                            ondragstart="return false;"
                          ></div>
                          <textarea class="textarea" style="height:70px; top:180px;"></textarea>
                          <span class="text-length">
                            <span id="textCount">已输入0字</span>
                          </span>
                        </div>
                      </div>
                      <br />

                      <canvas
                        id="mycanvasadd"
                        class="mycanvas"
                        width="144"
                        height="24"
                        style="display:none"
                      >不支持！</canvas>
                    </div>
                  </div>
                  <textarea
                    rows="3"
                    id="fosizeval"
                    style="display: none;width:100%"
                    cols="120"
                    placeholder="输入文本内容"
                    class="form-control"
                  ></textarea>
                </div>
                <div class="form-group col-sm-10" style="display: none;" id="imgadd">
                  <label for="name" class="control-label">上传图片</label>
                  <!--  <input type="file" id="file1"  name="file" accept="image/jpeg,image/jpg,image/png"/>!-->
                  <article>
                    <div class="item">
                      <svg class="icon addImg" aria-hidden="true">
                        <use xlink:href="#icon-tianjiatupian" />
                      </svg>
                      <input
                        name="url"
                        type="file"
                        class="upload_input"
                        style="display: none;"
                        accept="image/jpeg, image/jpg, image/png"
                        onchange="preview(this)"
                      />
                      <div class="preview"></div>
                      <div class="click" onclick="loadImg(this)"></div>
                      <div class="delete" onclick="deleteImg(this)">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-shanchu4" />
                        </svg>
                      </div>
                      <input type="hidden" id="hfile1" />
                      <input type="hidden" id="pathimg" />
                      <input type="hidden" id="pathsize" />
                      <input type="hidden" id="fileId" />
                    </div>
                    <div class="item">
                      <svg class="icon addImg" aria-hidden="true">
                        <use xlink:href="#icon-tianjiatupian" />
                      </svg>
                      <input
                        name="url"
                        type="file"
                        class="upload_input"
                        style="display: none;"
                        accept="image/jpeg, image/jpg, image/png"
                        onchange="preview(this)"
                      />
                      <div class="preview"></div>
                      <div class="click" onclick="loadImg(this)"></div>
                      <div class="delete" onclick="deleteImg(this)">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-shanchu4" />
                        </svg>
                      </div>

                      <input type="hidden" id="hfile1" />
                      <input type="hidden" id="pathimg" />
                      <input type="hidden" id="pathsize" />
                      <input type="hidden" id="fileId" />
                    </div>

                    <div class="item">
                      <svg class="icon addImg" aria-hidden="true">
                        <use xlink:href="#icon-tianjiatupian" />
                      </svg>
                      <input
                        name="url"
                        type="file"
                        class="upload_input"
                        style="display: none;"
                        accept="image/jpeg, image/jpg, image/png"
                        onchange="preview(this)"
                      />
                      <div class="preview"></div>
                      <div class="click" onclick="loadImg(this)"></div>
                      <div class="delete" onclick="deleteImg(this)">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-shanchu4" />
                        </svg>
                      </div>
                      <input type="hidden" id="hfile1" />
                      <input type="hidden" id="pathimg" />
                      <input type="hidden" id="pathsize" />
                      <input type="hidden" id="fileId" />
                    </div>

                    <div class="item">
                      <svg class="icon addImg" aria-hidden="true">
                        <use xlink:href="#icon-tianjiatupian" />
                      </svg>
                      <input
                        name="url"
                        type="file"
                        class="upload_input"
                        style="display: none;"
                        accept="image/jpeg, image/jpg, image/png"
                        onchange="preview(this)"
                      />
                      <div class="preview"></div>
                      <div class="click" onclick="loadImg(this)"></div>
                      <div class="delete" onclick="deleteImg(this)">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-shanchu4" />
                        </svg>
                      </div>

                      <input type="hidden" id="hfile1" />
                      <input type="hidden" id="pathimg" />
                      <input type="hidden" id="pathsize" />
                      <input type="hidden" id="fileId" />
                    </div>

                    <div class="item">
                      <svg class="icon addImg" aria-hidden="true">
                        <use xlink:href="#icon-tianjiatupian" />
                      </svg>
                      <input
                        name="url"
                        type="file"
                        class="upload_input"
                        style="display: none;"
                        accept="image/jpeg, image/jpg, image/png"
                        onchange="preview(this)"
                      />
                      <div class="preview"></div>
                      <div class="click" onclick="loadImg(this)"></div>
                      <div class="delete" onclick="deleteImg(this)">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-shanchu4" />
                        </svg>
                      </div>

                      <input type="hidden" id="hfile1" />
                      <input type="hidden" id="pathimg" />
                      <input type="hidden" id="pathsize" />
                      <input type="hidden" id="fileId" />
                    </div>

                    <!-- <div class="item">
        <svg class="icon addImg" aria-hidden="true">
        <use xlink:href="#icon-tianjiatupian"></use>
      </svg>
        <input name="url" type="file" class="upload_input" style="display: none;" accept="image/jpeg,image/jpg,image/png" onChange="preview(this)">
        <div class="preview"></div>
        <div class="click" onClick="loadImg(this)"></div>
        <div class="delete" onClick="deleteImg(this)">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shanchu4"></use>
          </svg>
      </div>
      
            <input type="hidden" id="hfile1"/>   
             <input type="hidden" id="pathimg"/> 
              <input type="hidden" id="pathsize"/> 
                <input type="hidden" id="fileId"/>  
                    </div>-->
                  </article>
                </div>
                <div class="form-group col-sm-10" style="display: none;" id="imgaddgif">
                  <label for="name" class="control-label">上传动画</label>
                  <!-- <input type="file" id="file2" name="file" accept="image/gif" />
                  <input type="hidden" id="hfile2"/>!-->
                  <article>
                    <div class="item">
                      <svg class="icon addImg" aria-hidden="true">
                        <use xlink:href="#icon-tianjiatupian" />
                      </svg>
                      <input
                        name="url"
                        type="file"
                        class="upload_input"
                        style="display: none;"
                        accept="image/gif"
                        onchange="previewgif(this)"
                      />
                      <div class="preview"></div>
                      <div class="click" onclick="loadImg(this)"></div>
                      <div class="delete" onclick="deleteImggif(this)">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-shanchu4" />
                        </svg>
                      </div>

                      <input type="hidden" id="hfile2" />
                      <input type="hidden" id="pathimggif" />
                      <input type="hidden" id="pathgifsize" />
                      <input type="hidden" id="fileId" />
                      <input type="hidden" id="gifwidepth" />
                    </div>
                  </article>
                </div>
              </form>
            </fieldset>
            <br />
            <div id="zoom" style="position:absolute;margin-lef:10px">
              <img src="static/img/fa.png" style=" width: 26px;
  " />
              <img src="static/img/sx.png" style="width: 26px;display: none;" />
              <span style="color: red;" id="zoomsum">0</span>
            </div>
            <center>
              <button type="button" id="addjm" class="btn btn-primary">保存</button>
              <button type="button" id="addjm2" class="btn btn-primary" style="display: none;">保存</button>
              &nbsp;&nbsp;
              <button type="button" id="addmb" class="btn btn-primary" style="display:none">保存为模板</button>
              &nbsp;&nbsp;
              <button
                type="button"
                id="selectmb"
                data-toggle="modal"
                data-target="#myModalmb"
                class="btn btn-success"
                style="display:none"
              >选择模板</button>

              <button
                type="button"
                id="selectxc"
                data-toggle="modal"
                style="display: none;"
                data-target="#myModalxc"
                class="btn btn-success"
              ></button>

              <button
                type="button"
                id="fsopen"
                data-toggle="modal"
                data-target="#myModal"
                class="btn btn-info"
                style="display: none;"
              >发送</button>
            </center>
            <fieldset
              id="fqfrom"
              class="scheduler-border"
              style="border:none;border-top: 1px solid rgb(66, 139, 202)"
            >
              <legend class="scheduler-border" style=" margin-bottom: 0px">节目信息</legend>

              <form class="form-inline" id="cssfrom" role="form">
                <br />

                <div class="form-group" style="display: none;">
                  <label for="name" class="control-label">宽度</label>
                  <!--<input type="number" class="form-control" value="516" step="8" id="jwidth" 
                  placeholder="请输入宽度">!-->

                  <div class="input-group spinner" style="margin-bottom: 0px;">
                    <input
                      type="text"
                      class="form-control"
                      id="jwidth"
                      onkeyup="this.value=this.value.replace(/\D/g,'')"
                      onafterpaste="this.value=this.value.replace(/\D/g,'')"
                      placeholder="请输入宽度"
                      value="516"
                    />
                    <div class="input-group-btn-vertical">
                      <button class="btn btn-default" type="button">
                        <i class="fa fa-caret-up"></i>
                      </button>
                      <button class="btn btn-default" type="button">
                        <i class="fa fa-caret-down"></i>
                      </button>
                    </div>
                  </div>
                </div>

                <div class="form-group" style="display: none;">
                  <label for="name" class="control-label">高度&nbsp;&nbsp;</label>
                  <!--<input type="number" class="form-control" value="190" id="jhigh" 
                  placeholder="请输入高度">!-->
                  <div class="input-group spinner" style="margin-bottom: 0px;">
                    <input
                      type="text"
                      class="form-control"
                      onkeyup="this.value=this.value.replace(/\D/g,'')"
                      onafterpaste="this.value=this.value.replace(/\D/g,'')"
                      id="jhigh"
                      placeholder="请输入高度"
                      value="190"
                    />
                    <div class="input-group-btn-vertical">
                      <button class="btn btn-default" type="button">
                        <i class="fa fa-caret-up"></i>
                      </button>
                      <button class="btn btn-default" type="button">
                        <i class="fa fa-caret-down"></i>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="form-group" style="display: none;">
                  <label for="name" class="control-label">订单&nbsp;&nbsp;</label>
                  <input
                    type="text"
                    class="form-control"
                    readonly="readonly"
                    id="order"
                    placeholder="请选择订单"
                    value="1"
                  />
                </div>

                <div class="form-group">
                  <label for="name" class="control-label">节目号</label>
                  <input
                    type="text"
                    class="form-control"
                    id="programid123"
                    style="width: 120px;display: none;"
                    value
                    readonly="readonly"
                  />

                  <select
                    id="programid"
                    name="programid"
                    class="form-control"
                    style="width: 120px; font-size:20px"
                  ></select>
                </div>

                <div class="form-group">
                  <label for="name" class="control-label">节目名称</label>
                  <input
                    type="text"
                    class="form-control"
                    id="festivalname"
                    value="节目_文本"
                    placeholder="请输入节目名称"
                    maxlength="20"
                  />
                </div>
                <div class="form-group" style="display: none;">
                  <label for="name" class="control-label">设备类型</label>
                  <select title id="devicetype" class="form-control" style="width:110px;">
                    <option value="0">单色</option>
                    <option value="1">双色</option>
                    <option value="2">全彩</option>
                    <option value="3">安卓</option>
                  </select>
                </div>
                <div class="form-group">
                  <label for="firstname" class="control-label">节目类型</label>
                  <select title class="form-control" id="typejm" style="width:110px;">
                    <!-- <option value="0">公益广告</option> 
                    <option value="1">商业广告</option>-->
                    <option value="2">即时节目</option>
                    <option value="3" selected>固定节目</option>
                  </select>
                  <!--<input type="text" class="form-control" id="name" 
                  placeholder="请输入名称">!-->
                </div>
                <div class="form-group" title="节目名称为播放的内容">
                  <label for="name" class="control-label">播放语音</label>
                  <select id="isplayvoice" class="form-control" style="width:110px;">
                    <option value="1">开启</option>
                    <option value="0" selected>关闭</option>
                  </select>
                </div>

                <div class="form-group">
                  <label for="name" class="control-label">播放类型</label>
                  <select title id="playtype" class="form-control" style="width:110px;">
                    <option value="0">次数</option>
                    <option value="1">时间</option>
                  </select>
                </div>

                <div class="form-group">
                  <label for="name" class="control-label">次数</label>
                  <select title id="playtime" class="form-control">
                    <option value="255">255</option>
                  </select>
                </div>
                <div class="form-group" style="display:">
                  <label for="name" class="control-label">播放日期</label>
                  <input
                    type="text"
                    style="width:120px"
                    class="date_picker input form-control"
                    id="starttime"
                    autocomplete="off"
                    onfocus="this.blur()"
                    placeholder="请输入播放起始日期"
                  />
                </div>

                <div class="form-group" style="display">
                  <span style="font-size: 18px;">~</span>
                  <input
                    type="text"
                    style="width:120px"
                    class="date_picker input form-control"
                    id="endtime"
                    autocomplete="off"
                    onfocus="this.blur()"
                    placeholder="请输入播放结束日期"
                  />
                </div>
                <div class="form-group" style="margin-bottom: 0px;display:none">
                  <label for="name" class="control-label">开始时间段</label>

                  <!--<select title="" id="timeid" class="form-control" style="width:196px">
                  </select>-->
                  <input
                    type="text"
                    id="timeid"
                    style="width:120px"
                    class="time form-control"
                    placeholder="请输入开始时间段"
                  />
                </div>
                <div class="form-group" style="margin-bottom: 0px;display:none">
                  <label for="name" class="control-label">结束时间段</label>

                  <!--	<select title="" id="starthour" class="form-control" style="width:196px">
                  </select>!-->
                  <input
                    type="text"
                    id="starthour"
                    style="width:120px"
                    autocomplete="off"
                    class="form-control time"
                    placeholder="请输入结束时间段"
                  />
                </div>

                <div class="form-group" style="height:41px;">
                  <ul class="current" style="margin-left:2px;display:flex">
                    <label class="control-label">星期:&nbsp;&nbsp;</label>
                    <li>
                      <input
                        type="checkbox"
                        name
                        id="check_box11"
                        class="css-checkbox"
                        value="1"
                        checked
                      />
                      <label for="check_box11" class="css-label">星期一</label>
                    </li>
                    <li>
                      <input
                        type="checkbox"
                        name
                        id="check_box12"
                        class="css-checkbox"
                        value="2"
                        checked
                      />
                      <label for="check_box12" class="css-label">星期二</label>
                    </li>
                    <li>
                      <input
                        type="checkbox"
                        name
                        id="check_box13"
                        class="css-checkbox"
                        value="3"
                        checked
                      />
                      <label for="check_box13" class="css-label">星期三</label>
                    </li>
                    <li>
                      <input
                        type="checkbox"
                        name
                        id="check_box14"
                        class="css-checkbox"
                        value="4"
                        checked
                      />
                      <label for="check_box14" class="css-label">星期四</label>
                    </li>
                    <li>
                      <input
                        type="checkbox"
                        name
                        id="check_box15"
                        class="css-checkbox"
                        value="5"
                        checked
                      />
                      <label for="check_box15" class="css-label">星期五</label>
                    </li>
                    <li>
                      <input
                        type="checkbox"
                        name
                        id="check_box16"
                        class="css-checkbox"
                        value="6"
                        checked
                      />
                      <label for="check_box16" class="css-label">星期六</label>
                    </li>
                    <li>
                      <input
                        type="checkbox"
                        name
                        id="check_box17"
                        class="css-checkbox"
                        value="7"
                        checked
                      />
                      <label for="check_box17" class="css-label">星期天</label>
                    </li>
                  </ul>
                </div>

                <div class="form-group" style="margin-left:20px;padding-bottom: 12px;">
                  <input type="checkbox" id="highTime" />
                  <label class="css-label" style="color:blue;">时段信息扩展</label>
                </div>

                <div class="form-group" style="padding-left: 28px;padding-bottom: 9px;display:none">
                  <label>时间个数</label>

                  <select
                    class="form-control"
                    id="liveCount"
                    style="width:57px"
                    onchange="timeChange()"
                  >
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                  </select>
                </div>

                <!-- 播放时段 -->
                <div class="form-group" style="margin:20px 0px;display:none">
                  <table id="liveTime">
                    <tr>
                      <td>
                        <label>开始1</label>
                      </td>
                      <td>
                        <div id="liveStart1" class="time"></div>
                      </td>
                      <td>
                        <label>~</label>
                      </td>
                      <td>
                        <div id="liveEnd1" class="time"></div>
                      </td>
                      <td>
                        <label>开始2</label>
                      </td>
                      <td>
                        <div id="liveStart2" class="time"></div>
                      </td>
                      <td>
                        <label>~</label>
                      </td>
                      <td>
                        <div id="liveEnd2" class="time"></div>
                      </td>
                      <td>
                        <label>开始3</label>
                      </td>
                      <td>
                        <div id="liveStart3" class="time"></div>
                      </td>
                      <td>
                        <label>~</label>
                      </td>
                      <td>
                        <div id="liveEnd3" class="time"></div>
                      </td>
                      <td>
                        <label>开始4</label>
                      </td>
                      <td>
                        <div id="liveStart4" class="time"></div>
                      </td>
                      <td>
                        <label>~</label>
                      </td>
                      <td>
                        <div id="liveEnd4" class="time"></div>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <label>开始5</label>
                      </td>
                      <td>
                        <div id="liveStart5" class="time"></div>
                      </td>
                      <td>
                        <label>~</label>
                      </td>
                      <td>
                        <div id="liveEnd5" class="time"></div>
                      </td>

                      <td>
                        <label>开始6</label>
                      </td>
                      <td>
                        <div id="liveStart6" class="time"></div>
                      </td>
                      <td>
                        <label>~</label>
                      </td>
                      <td>
                        <div id="liveEnd6" class="time"></div>
                      </td>
                      <td>
                        <label>开始7</label>
                      </td>
                      <td>
                        <div id="liveStart7" class="time"></div>
                      </td>
                      <td>
                        <label>~</label>
                      </td>
                      <td>
                        <div id="liveEnd7" class="time"></div>
                      </td>
                      <td>
                        <label>开始8</label>
                      </td>
                      <td>
                        <div id="liveStart8" class="time"></div>
                      </td>
                      <td>
                        <label>~</label>
                      </td>
                      <td>
                        <div id="liveEnd8" class="time"></div>
                      </td>
                    </tr>
                  </table>
                </div>

                <!-- <div class="form-group" style="margin-bottom: 0px;" id="Test">
<label for="name" class="control-label">价格</label>
		
<input type="text" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"  style="width:120px"  id="programPrice" placeholder="请输入价格" value="0" class="form-control">
                </div>-->
              </form>
              <br />
              <br />
            </fieldset>
          </div>

          <!-- 323232!-->
        </div>
      </div>
    </fieldset>

    <img id="images" style="display:none" />

    <!--  <div id="htmldiv" style="display:none;"><div>!-->

    <!--  <center>  <button type="button" class="btn btn-primary" id="addjm">保存</button>

 <button type="button" class="btn btn-primary" id="addjm2" style="display:none">保存</button>
&nbsp;&nbsp;<button type="button" class="btn btn-primary" id="addmb">保存为模板</button>
&nbsp;&nbsp;<button type="button" class="btn btn-success" id="selectmb" data-toggle="modal" data-target="#myModalmb">选择模板</button>
 <button type="button" class="btn btn-info" id="fsopen" style="display:none"  data-toggle="modal" data-target="#myModal">发送</button>
    </center> !-->

    <div
      class="modal fade"
      id="myModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">设备选择</h4>
          </div>
          <div class="modal-body">
            <loading></loading>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" id="sbfs">发送</button>
          </div>
        </div>
      </div>
    </div>
    <!--模板!-->
    <div
      class="modal fade"
      id="myModalmb"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">节目模板选择</h4>
          </div>

          <div class="modal-body">
            <div
              class="row"
              id="programInfomb"
              style="margin:0px 0px;overflow:auto;height:450px;text-align:center;width: 100%;"
            ></div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" id="mbdel">删除</button>
            <button type="button" class="btn btn-primary" id="mbqd">确定</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal -->
    </div>

    <!--模板!-->
    <div
      class="modal fade"
      id="myModalxc"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">炫彩效果选择</h4>
          </div>

          <div class="modal-body">
            <div
              class="row"
              id="Dazzlediv"
              style="margin:0px 0px;overflow:auto;height:85px;text-align:center;width: 100%;"
            >
              <div class="col-md-2">
                <div onclick="xc(0)" style="width:64px;height:64px;border: 1px solid #ddd;">
                  <b>暂无效果</b>
                </div>
              </div>
              <div class="col-md-2" onclick="xc(1)">
                <img src="static/img/1.1.gif?r=2" />炫1
              </div>
              <div class="col-md-2" onclick="xc(2)">
                <img src="static/img/2.2.gif" />炫2
              </div>
              <div class="col-md-2" onclick="xc(3)">
                <img src="static/img/3.3.gif" />炫3
              </div>
              <!-- <div class="col-md-2" onClick="xc(4)"><img src="static/img/4.gif"></div> -->
              <!-- <div class="col-md-2" onClick="xc(4)"><img src="static/img/4.gif"></div>  -->
            </div>
          </div>
          <div class="modal-footer" style="display: none;">
            <button type="button" class="btn btn-primary" id="mbqd">确定</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal -->
    </div>
  </div>
</template>
<style >
@import "../../../../static/css/page/Program/addtow.css";
</style>
<script>
//import  '../../../../static/js/mloading/jquery.mloading.js';
import "../../../../static/js/time/jquery.date_input.pack.js";
import "../../../../static/js/drag.js";
import "../../../../static/js/time/jquery-clock-timepicker.js";
import "../../../../static/js/svg.js";
import "../../../../static/js/resize.js";

import "../../../../static/js/jquery-ui-jqLoding.js";

import "../../../../static/js/time/timer.js";
import "../../../../static/js/page/Program/addtow.js";
import loading from "@/views/tree/companydeviceselect.vue";
import week from "@/views/Page/Common/week.vue";

export default {
  data() {
    return {};
  },
  created() {},
  methods: {
    //坐标转换完之后的回调函数
  },
  mounted() {
    this.$nextTick(function() {});
  },
  components: {
    loading: loading,
    week: week
  }
};

$(function() {
  $(".edui-splitbutton-body").hide();
});
</script>


